<template>
	<view class="container">
		<view class="poetrys-list">
			<block v-for="(poetry,index) in poetrys" :key="index">
				<view class="poetry-item" @click="onPoetryItemClick(poetry.index)">
					<view v-if="isRank" class="poetry-index">排名:{{poetry.index}}</view>
					<view class="poetry-title">{{poetry.title}}</view>
					<view class="poetry-info">
						<view>{{poetry.time}}</view>
						<view>{{poetry.author}}</view>
					</view>
					<image v-if="poetry.pic" mode="scaleToFill" class="poetry-image" :src="poetry.pic"></image>
					<block v-for="(item,index) in splitContent(poetry.content)" :key="index">
						<view class="poetry-content">{{item}}</view>
					</block>
				</view>
			</block>
		</view>

		<view class="page-index">
			<block v-for="(item,index) in pages" :key="index">
				<!-- :style="{ item =='下一页'?'font-size:15px;':''}" -->
				<view class="page-index-item" :style="{ fontSize:item =='下一页'?'15px':''}" :class="{'page-index-item_cur':item==curPage}"
				 @click="onIndexClick(item)">{{item}}
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		poetryDetail
	} from '@/router.js'
	export default {
		data() {
			return {
				poetryList: [],
				poetrys: [],
				curPage: 1,
				isRank: true,
				pages: [1, 2, 3, 4, 5, '下一页']
			}
		},
		onLoad(options) {
			var optitle = options.title

			uni.setNavigationBarTitle({
				title: optitle ? optitle : '诗词排行榜'
			})
			let condition = {
				collection: 'poetry',
				type: 'rank'
			}
			if (optitle) {
				this.isRank = false
				condition.type = 'mark'
				condition.title = optitle
			}
			this.getRankData(condition)
		},
		methods: {
      splitContent(list){
        let list1 = []
        list.map(item => {
          let lastP = item.lastIndexOf("。") == item.length-1
          let list2 = item.split("。").filter(item => item)
          let list3 = list2.map((item, index) => {
            if (index == list2.length - 1 && !lastP) return item
            else return item + "。"
          })
          list1 = [...list1, ...list3]
        })
        return list1
      },
			getRankData(condition) {
        this.$tools.showLoading()
        uniCloud.callFunction({
					name: "database",
					data: condition,
					success: (res) => {
            uni.hideLoading()
						console.log(res)
						let result = res.result.data
						if (result && result.length > 0) {
							let poetrys = result[0].poetrys
							this.poetrys = poetrys.slice(0, 10)
							this.poetryList = poetrys
						}
					}
				})
			},
			//页面点击监听
			onIndexClick(value) {
				console.log(value)
				var pages = this.pages
				var curPage = this.curPage
				var poetryList = this.poetryList
				var remainPoes = poetryList.length - 10 * pages[4]
				// console.log("remainPoes", remainPoes)
				// 点击的是最有一个页码
				var clickLastPage = value == pages[4].toString()
				// 点击"下一页"到最后一个页码
				var nextToLastPage = value == "下一页" && curPage == pages[3]
				if (remainPoes < 0 && (clickLastPage || nextToLastPage)) {
					uni.showToast({
						title: '暂无更多数据'
					})
					return;
				}
				curPage = value != '下一页' ? value : curPage + 1
				if (curPage == pages[4] && curPage < 20) {
					var arr = [curPage + 1, curPage + 2]
					pages.splice(0, 2)
					pages.splice(3, 0, arr[0], arr[1])
				}
				if (curPage == pages[0] && curPage > 1) {
					var arr = [curPage - 2, curPage - 1]
					pages.splice(3, 2)
					pages.splice(0, 0, arr[0], arr[1])
				}
				var start = (curPage - 1) * 10
				// console.log(poetryList, start)
				var poetrys = poetryList.slice(start, start + 10)
				this.pages = pages
				this.curPage = curPage
				this.poetrys = poetrys
				this.pageScrollToTop()
			},
			// 使页面滚动到容器顶部
			pageScrollToTop: function() {
				uni.createSelectorQuery().select('.poetrys-list').boundingClientRect(function(rect) {
					console.log(rect.height);
					uni.pageScrollTo({
						scrollTop: 0
					})
				}).exec()
			},
			//诗词item点击监听
			onPoetryItemClick(index) {
				console.log(index)
				var poetryList = this.poetryList
				var poetry = JSON.stringify(poetryList[index-1])
				// console.log(poetry)
				wx.navigateTo({
					url: poetryDetail + '?poetry=' + encodeURIComponent(poetry)
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	view {
		font-size: 17px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
	}

	.poetrys-list {
    padding-bottom: 45px;
	}

	.poetry-item {
		margin: 15px 15px;
		padding: 10px;
		border-radius: 8px;
		background: #d6cebf;
		box-shadow: 0 0 2px #ccc;
		text-align: center;
		position: relative;
	}

	.poetry-index {
		position: absolute;
		top: 0px;
		left: 0px;
		color: white;
		padding: 3px 7px;
		font-size: 13px;
		background: #697284;
		border-top-left-radius: 5px;
		border-bottom-right-radius: 3px;
	}

	.poetry-title {
		font-size: 20px;
		font-weight: 800;
		margin-top: 15px;
	}

	.poetry-info {
		margin: 5px;
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: center;
	}

	.poetry-image {
    width: 90%;
    border-radius: 4px;
    max-height: 200px;
    background-color: #eaeef1;
    opacity: 0.8;
	}

	.page-index {
		background: white;
		position: fixed;
		bottom: 0px;
		text-align: center;
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 40px;
		justify-content: center;
		box-shadow: 0 0 1px #ccc;
	}

	.page-index-item {
		font-size: 15px;
		font-weight: 700;
		height: 100%;
		width: 50px;
		line-height: 40px;
		color: #C39966;
	}

	.page-index-item_cur {
		background: #F5EEE5;
	}

	.hover_page-index-item {
		background: #F5EEE5;
	}

	.poetry-content {
		line-height: 28px;
    font-size: 15px;
	}
</style>
